<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>good</title>
		<link href="css/mi.css" type="text/css" rel="stylesheet">
		<link href="css/personal.css" type="text/css" rel="stylesheet">
		<link href="css/good.css" type="text/css" rel="stylesheet">
		<link href="layui/css/layui.css" type="text/css" rel="stylesheet">

		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="js/mi.js"></script>
		<script src="js/personal.js"></script>

	</head>

	<body onclick="hidehotbox()">

		<div style="margin:auto;height:0px;width:1226px">
			<div style="position:relative;top:40px;left:916px">
				<div class="shop-box" id="shopbox">购物车中还没有商品，赶紧选购吧！</div>
			</div>
		</div>

		<div style="margin:0 auto auto auto;height:0px;width:1226px">
			<div style="position:relative;top:40px;left:864px">
				<div class="personbox">
					<div class="personconttent">个人中心</div>
					<div class="personconttent">我的喜欢</div>
					<div class="personconttent">小米账户</div>
					<div class="personconttent">退出登录</div>
				</div>
			</div>
		</div>

		<div class="main" onmouseover="hidePersonBox()">
			<div class="main" onmouseover="colsebox()">
				<div class="top">
					<div class="top-content">
						<a href="#">小米商城</a>
						<a href="#">MIUI</a>
						<a href="#">米聊</a>
						<a href="#">游戏</a>
						<a href="#">多看阅读</a>
						<a href="#">云服务</a>
						<a href="#">金融</a>
						<a href="#">小米移动版</a>
						<a href="#">问题反馈</a>
						<a href="#">SelectRegion</a>
						<div class="top-shop" id="car" onmouseover="shopbox()">购物车(0)</div>
						<div style="float:right">
							<a href="regist.html">消息通知</a>
							<a href="#">我的订单</a>
						</div>
						<div class="personal" onmouseover="showPersonBox()">1212323&nbsp;∨</div>
					</div>
				</div>

				<div class="title">
					<div class="title-logo">
						<a href="#"><img src="img/mi.png" /></a>
					</div>
					<div class="title-gif">
						<a href="#"><img src="img/mkljl.gif" width="163px" height="57px" /></a>
					</div>
					<div class="title-content">
						<a href="#">小米手机</a>
						<a href="#">红米</a>
						<a href="#">平板-笔记本</a>
						<a href="#">电视</a>
						<a href="#">盒子-影音</a>
						<a href="#">路由器</a>
						<a href="#">智能硬件</a>
						<a href="#">服务</a>
						<a href="#">社区</a>
					</div>
					<div class="title-search">
						<div class="title-input" name="sborder">
							<input type="text" onclick="showhotbox()" />
							<div style="position:relative;right:-90px;top:-14px">
								<div class="title-tag" id="tag">
									<a href="#">小米MIX</a>
									<a href="#">人工智能电视</a>
								</div>
							</div>
						</div>
						<div class="title-btn" name="sborder">
							搜索
						</div>
						<div style="position:relative;top:58px;right:0px">
							<div id="hotbox" class="title-hotbox" name="sborder">
								<ul>
									<li>小米5 plus
										<div class="title-count">约有5件</div>
									</li>
									<li>小米MAX
										<div class="title-count">约有10件</div>
									</li>
									<li>小米MIX
										<div class="title-count">约有20件</div>
									</li>
									<li>小米note
										<div class="title-count">约有5件</div>
									</li>
									<li>红米none5
										<div class="title-count">约有15件</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>

				<div class="bg">
					<div class="info">
						<div class="info-top">
							<a href="#">首页</a> >
							<a href="#">电子产品</a> > apple 6
						</div>
						<div class="good-show">
							<div class="good-image">
								<div class="good-image-top" style="position: relative;">
									<img src="img/hot1.jpg" width="320px" height="420px"/>
									<div id="slider_block" style="display:none;width:200px;height:200px;position:absolute;border:1px solid lightgray;cursor:all-scroll;"></div>
								</div>
								
								<div class="good-image-bottom">
									<div style="position: relative;top:430px;z-index: 1;">
										<div style="position: absolute;width: 400px;height: 120px;">
											<div class="good-image-bottom-btn" style="float:left;" onclick="getGoodPic('0')">
												<</div>
													<div class="good-image-bottom-btn" style="float:right" onclick="getGoodPic('-1')">></div>
											</div>
										</div>

										<div class="good-image-bottom-img">
											<ul id="good-li">
												<li><img src="img/hot1.jpg" width="80px" height="90px" style="margin-top: 5px;"></li>
												<li><img src="img/lun2.jpg" width="80px" height="90px" style="margin-top: 5px;"></li>
												<li><img src="img/graybox1.2.jpg" width="80px" height="90px" style="margin-top: 5px;"></li>
												<li><img src="img/graybox1.3.jpg" width="80px" height="90px" style="margin-top: 5px;"></li>
												<li><img src="img/graybox2.1.jpg" width="80px" height="90px" style="margin-top: 5px;"></li>
												<li><img src="img/lun5.jpg" width="80px" height="90px" style="margin-top: 5px;"></li>
											</ul>
										</div>

									</div>
								</div>
								<div class="good-content">
									<div id="big_image" style="width: 600px;height:620px; border:1px solid lightgray;overflow: hidden; display: none;position:absolute;top:180px;left: 640px;"><img src="img/hot1.jpg" id="images" style=" display: block;width: 1000px;height: 1000px;position: absolute;"></div>
									<div class="good-content-title">苹果6 Apple 6</div>
									<div class="good-content-txt">面料尼龙/氨纶/进口棉，连体内衣裤，高腰款，腰部有皮筋，后背是全镂空交叉肩带</div>
									<div class="good-content-price">价格：<span style="font-size: 16px;color: red;">4899</span>RMB</div>
									<div class="good-content-price">
										配送方式：<span style="color:black">海外直邮</span><br> 运费：
										<span style="color:black">卖家承担</span><br>
									</div>
									<div class="good-content-choise">
										<div class="good-content-ch">
											<label>尺码：</label>
											<ul>
												<li>M</li>
												<li>S</li>
												<li>X</li>
												<li>XL</li>
											</ul>
										</div>
										<div class="good-content-ch">
											<label>颜色：</label>
											<ul>
												<li>红色</li>
												<li>黄色</li>
												<li>金色</li>
												<li>粉红色</li>
											</ul>
										</div>
										<div class="good-content-ch">
											<label>数量：</label>
											<a onclick="getCount('del')">-</a>
											<input type="text" value="1"/>
											<a onclick="getCount('add')">+</a>
											<label>件</label>
											<span style="font-size:10px;float:left;color:lightgray;padding:1px;margin:10px 0 0 0px">剩余库存：3件 </span>
										</div>
									</div>
									<div class="good-content-buy">
										<input type="button" value="立即购买" />
										<input type="button" value="加入购物车" />
										<div class="good-content-like">☆</div>
										<span style="font-size: 12px;color:lightgray;float: left;margin:20px 0 0 5px;">收藏宝贝</span>
									</div>
								</div>
								<div class="good-person">
									<div class="good-person-top">
										<div class="good-person-img"><img src="img/hot1.jpg" width="80px" height="80px"></div>
										<div class="good-person-name">
											菲菲<br>
											<span style="font-size: 12px;color:lightgrey;">
											买手等级：中级<br>住址：美国
										</span>
											<div class="good-person-sign">个性签名：
												<p style="text-indent: 2em;">一切皆有可能</p>
											</div>
										</div>
									</div>
									<div class="good-person-btn">
										<input type="button" value="+关注" />
										<input type="button" value="联系" />
									</div>
								</div>

								<div class="good-buttom">
									<div class="good-hot">
										<h2>相关推荐</h2>
										<div>
											<img src="img/hot1.jpg" width="240px" height="180px"><br><br>
											<span style="text-align: left;padding-left: 20px;float:left;font-size: 14px;">
											笔记本 kkkl<br>
											<p style="color:red;font-weight: bold;">2333 RMB</p>
										<span>
									</div>
									<div>
										<img src="img/hot1.jpg" width="240px" height="180px"><br><br>
										<span style="text-align: left;padding-left: 20px;float:left;font-size: 14px;">
											笔记本 kkkl<br>
											<p style="color:red;font-weight: bold;">2333 RMB</p>
										<span>
									</div>
									<div>
										<img src="img/hot1.jpg" width="240px" height="180px"><br><br>
										<span style="text-align: left;padding-left: 20px;float:left;font-size: 14px;">
											笔记本 kkkl<br>
											<p style="color:red;font-weight: bold;">2333 RMB</p>
										<span>
									</div>
									<div>
										<img src="img/hot1.jpg" width="240px" height="180px"><br><br>
										<span style="text-align: left;padding-left: 20px;float:left;font-size: 14px;">
											笔记本 kkkl<br>
											<p style="color:red;font-weight: bold;">2333 RMB</p>
										<span>
									</div>
									<div>
										<img src="img/hot1.jpg" width="240px" height="180px"><br><br>
										<span style="text-align: left;padding-left: 20px;float:left;font-size: 14px;">
											笔记本 kkkl<br>
											<p style="color:red;font-weight: bold;">2333 RMB</p>
										<span>
									</div>
									<div>
										<img src="img/hot1.jpg" width="240px" height="180px"><br><br>
										<span style="text-align: left;padding-left: 20px;float:left;font-size: 14px;">
											笔记本 kkkl<br>
											<p style="color:red;font-weight: bold;">2333 RMB</p>
										<span>
                               </div>
                          </div>
<div class="good-detail">
	<div class="layui-tab layui-tab-card"lay-filter="demo">
		<ul class="layui-tab-title">
			<li class="layui-this">商品详情</li>
			<li>问买手</li>
		</ul>
		<div class="layui-tab-content" style="padding:20px;">
			<div class="layui-tab-item layui-show">
				<div calss="good-de">
				        <p> 三色可选，新品预热，特价699美国直邮包邮包税到手！分分钟断货的节奏<p><br>
				    
					<img src="img/hot1.jpg" width="700px" height="800px"/>
					<img src="img/hot1.jpg" width="700px" height="800px"/>
					<img src="img/hot1.jpg" width="700px" height="800px"/>
					<img src="img/hot1.jpg" width="700px" height="800px"/>
					<img src="img/hot1.jpg" width="700px" height="800px"/>
					<img src="img/hot1.jpg" width="700px" height="800px"/>
					
			    </div>
			</div>
			<div class="layui-tab-item">
				<div class="good-talks">
					<div class="talk-box" style="width:800px;height:40px;margin:0 0 20px 0;padding-bottom: 20px;border-bottom:1px dashed lightgray;float:left">
						<textarea rows="2" cols="50"  style="float:left;border:1px solid lightgray;resize: none;"></textarea>
						<input type="button" value="发送" style="float:left;height: 40px;width: 40px;cursor: pointer;border:1px solid lightgray;border-left: 0;" onclick="sendTalk()">
					</div>
					
				    <div class="good-talks-box">
				    	<table border="0">
				    	    <tbody>
				    	    	<tr>
				    	    		<td rowspan="2">
				    	    			<div class="good-talks-img">
				    		                 <img src="img/hot1.jpg" width="60px" height="60px"/>
				    	                </div>
				    	    		</td>
				    	    		<td style="padding-left: 10px;"><span style="font-size: 16px;float:left">菲菲</span>
											<span style="font-size: 10px;float:left;margin:5px 0 0 10px;"> 2017-2-16 22:11</span>
											</td>
											<td>
												<input style="background-color: #FFF9EC;border:1px solid lightgray;float: right;font-size: 10px;cursor: pointer;" type="button" value="回复" onclick="showTalkBox()"/>
											</td>
											</tr>
											<tr>
												<td colspan="2" style="padding-left: 10px;">为什么评论说一到货就是北京时间？不是说是西班牙专柜的嘛？</td>
											</tr>

											</tbody>
											</table>
				<div class="good-talks-box" style="border-bottom: 0;border-top: 1px dashed lightgray;margin-top: 10px;">
				    	<table border="0" >
				    	    <tbody>
				    	    	<tr>
				    	    		<td rowspan="2" style="width:90px">
				    	    			<div class="good-talks-img">
				    		                 <img src="img/hot1.jpg" width="60px" height="60px"/>
				    	                </div>
				    	    		</td>
				    	    		<td style="padding-left: 10px;"><span style="font-size: 16px;float:left">哈克</span><span style="font-size:10px;float: left;margin-top: 5px;padding:0 10px 0 10px">回复</span><span style="font-size: 16px;float:left">菲菲</span>
											<span style="font-size: 10px;float:left;margin:5px 0 0 10px;"> 2017-2-17 08:11</span>
											</td>
											<td>
												<input style="background-color: #FFF9EC;border:1px solid lightgray;float: right;font-size: 10px;cursor: pointer;" type="button" value="回复" onclick="showTalkBox()"/>
											</td>
											</tr>
											<tr>
												<td colspan="2" style="padding-left: 10px;">不知道了</td>
											</tr>

											</tbody>
										</table>
										</div>
											<div class="talk-box" style="margin-left: 60px;width:740px;height:40px;display: none;margin-top: 20px;padding-top: 20px;border-top: 1px dashed lightsalmon;float:left" id="gtalk">
												<textarea rows="2" cols="50" style="float:left;border:1px solid lightgray;resize: none;"></textarea>
												<input type="button" value="发送" style="float:left;height: 40px;width: 40px;cursor: pointer;border:1px solid lightgray;border-left: 0;" onclick="sendTalk()">
											</div>
										</div>
										

									</div>

								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="good-buttom-end">
					<img src="img/sa.jpg" width="1218px" />
				</div>
			</div>

		</div>
		</div>
		</div>
		<script src="js/good.js"></script>
		<script src="layui/layui.js"></script>
		<script src="js/showbigimg.js"></script>
		<script>
			$(document).ready(function() {
				layui.use(['layer', 'laypage', 'element'], function() {
					var layer = layui.layer,
						laypage = layui.laypage,
						element = layui.element();

					//监听Tab切换
					element.on('tab(demo)', function(data) {

					});
				});
			});
		</script>

	</body>

</html>